<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :modal="true"
      :close-on-click-modal="false"
      top="10vh"
      @closed="closed"
    >


    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="queryForm.keywords" placeholder="请输入关键字检索."  />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search"  size="mini" :loading="loading" @click="onQuerySubmit">查询</el-button>
        <el-button type="info" icon="el-icon-refresh"  size="mini" :loading="loading" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" style="margin-bottom: 0.3125rem;">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          :loading="loading"
          t
        >新增</el-button>
      </el-col>
    </el-row>

    <el-table
      ref="multipleRoleUserTable"
      :data="tableData"
      border
      empty-text="暂无数据."
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="columnName"
        label="字段名称"
        >
      </el-table-column>
      <el-table-column
        prop="columnCode"
        label="字段标识"
        >
      </el-table-column>

      <el-table-column
        prop="columnType"
        label="字段类型"
        >
      </el-table-column>

      <el-table-column
        prop="defaultValue"
        label="默认值"
        >
      </el-table-column>

      <el-table-column
        prop="sort"
        label="排序码"
        >
      </el-table-column>

      <el-table-column label="操作" align="left" >
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit-outline" size="small" @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button type="text" icon="el-icon-delete" size="small" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-row>
      <el-col :span="24">
        <div align="right" style="margin-top: 0.3125rem;">
          <el-pagination background layout="prev, pager, next" :current-page="page.cur" :page-size="page.limit" :total="page.total" @current-change="handleCurrentChange" />
        </div>
      </el-col>
    </el-row>
    </el-dialog>


    <!--编辑框-->
    <FormFiledInfoDialog
      v-if="formFiledInfoDialog.visible"
      :properties="formFiledInfoDialog"
      @closed="closeFormFiledInfoDialog"
      @refresh="load"
    />


  </div>
</template>

<script>
  import {
    findFormFieldList,
    deleteFormField
  } from '@/api/template/form.js'

  import {
    isOk
  } from '@/utils/request'

  import FormFiledInfoDialog from './FormFiledInfoDialog.vue'


  export default {
    name: 'FormFiledDialog',
    components: {
      FormFiledInfoDialog
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{
    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.formData= value.data
            this.title = '当前模板:'+value.data.name
          } else {
            this.formData={}
          }
        },
        immediate: true,
        deep: false
      }
    },
    created() {
      this.load();
    },
    data(){
      return {
        visible:false,
        title:'',
        loading:false,
        formData: {
        },
        queryForm: {
          keywords: undefined,
          formTemplateId: '',
        },
        page: {
          cur: 1,
          limit: 50,
          total: 0
        },
        tableData: [],
        formFiledInfoDialog: {
          visible: false,
          type: '0',
          data: {}
        },
        usedColumns:[]
      }
    },
    methods:{
      onQuerySubmit(event) {
        this.load()
      },
      onReset(event) {
        this.queryForm.keywords=undefined;
        this.queryForm.status='0';
        this.load()
      },
      load(){
        this.loading=true
        findFormFieldList({
          formTemplateId:this.formData.id,
          cur: this.page.cur,
          limit: this.page.limit,
          keywords: this.queryForm.keywords
        }).then(rsp => {
          if(isOk(rsp)){
            const _data = rsp.data.list
            this.page.total = rsp.data.totalRow
            this.tableData = _data
            this.loading = false
            const userFiled=[];
            this.tableData.forEach(function(item,index,arr){
               userFiled.push(item.columnCode);
            });
            this.usedColumns=userFiled;
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      handleCurrentChange(cur) {
        this.page.cur = cur
        this.load()
      },
      handleAdd(){
        this.formFiledInfoDialog.visible = true
        this.formFiledInfoDialog.type = '0'
        this.formFiledInfoDialog.data={
          formTemplateId:this.formData.id
        }
        this.formFiledInfoDialog.usedColumns=this.usedColumns
      },
      closeFormFiledInfoDialog(){
        this.formFiledInfoDialog.visible = false
        this.formFiledInfoDialog.data = {}
        this.load()
      },
      handleEdit: function(data) {
        this.formFiledInfoDialog.visible = true
        this.formFiledInfoDialog.type = '1'
        this.formFiledInfoDialog.data = data
        this.formFiledInfoDialog.usedColumns=this.usedColumns
      },
      handleDelete: function(data) {
        this.$confirm('确认删除【' + data.columnName + '】吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          deleteFormField({
            id: data.id
          }).then(response => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 500
            })
            this.load()
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
        })
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style>
</style>
